<!DOCTYPE html>
<html>
<head>
  <title>箱子管理系统</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

  <link href="/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
  <link rel="stylesheet" type="text/css" href="/css/style.css">
  <script src="/lib/jq/jquery-1.11.2.min.js"></script>
  <script src="/lib/jq/bootstrap.min.js"></script>
  <script type="text/javascript" src="/js/bootstrap-paginator.min.js"></script>
  <script type="text/javascript" src="/js/jquery.qrcode.min.js"></script>
  <script type="text/javascript" src="/js/boxM.js"></script>
  <script type="text/javascript">
  $(function(){

  //获得浏览器参数
  $.extend({
  getUrlVars: function(){
  var vars = [], hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  for(var i = 0; i
  < hashes.length; i++){
  hash = hashes[i].split('=');
  vars.push(hash[0]);
  vars[hash[0]] = hash[1];
  }
  return vars;
  },
  getUrlVar: function(name){
  return $.getUrlVars()[name];
  }
  });

  //封装浏览器参数
  var composeUrlParams=function(){
  var param='';
  $.each($.getUrlVars(), function(i, item) {
  if(item!='p'){
  var val=$.getUrlVar(item);
  if(val) param += "&" + item+"="+val;
  }
  });
  return param;
  }

  //分页功能
  var options = {
  currentPage:<%- page.num %>,
  totalPages:<%- page.pageCount %>,
  numberOfPages:5,
  pageUrl: function(type, page, current) {    //页面跳转
      if(page!=<%- page.num %>){
          return '/box_management/box?num='+ page;
      }
  }
  }
  $('#page2').bootstrapPaginator(options);
  })
  </script>
  <style>
    a input{
      margin-top: 10px;
    }
  </style>
</head>
<body style="margin:15px;">
<div id="lert"></div>
<% if (success) { %>
<div class="alert alert-success">
    <h4><%= success %></h4>
</div>
<% } %>
<% if (error) { %>
<div class="alert alert-error">
    <h4><%= error %></h4>
</div>
<% } %>
<legend>箱子管理</legend>
    <a href="/box_management/create"><input style="width:55px;height:30px;background-color:#DBDBDB;border:1px solid #DBDBDB;border-radius:3px;margin-bottom: 15px;" type="button" value="新增" /></a>
    <table class="table table-bordered" >
    <tr>
      <td style="text-align: center;width:20%"><b>箱子ID</b></td>
      <td style="text-align: center;width:5%"><b>订阅号</b></td>
      <td style="text-align: center;width:10%"><b>布局</b></td>
      <td style="text-align: center;width:5%"><b>中奖率</b></td>
      <td style="text-align: center;width:5%"><b>中奖率(happyhour)</b></td>
      <td style="text-align: center;width:20%"><b>中奖率时段(happyhour)</b></td>
      <td style="text-align: center;width:40%"><b>操作</b></td>
    </tr>
    <% for(var i=0;i<datas.length;i++){ %>
    <tr>
      <td style="text-align: center;width:20%"><a href="/box_management/box_order?boxid=<%=datas[i].box_id%>"><%=datas[i].box_id%></a></td>
      <td style="text-align: center;width:5%"><%=datas[i].sim%></td>
      <td style="text-align: center;width:10%"><%=datas[i].box_layout%></td>
      <td style="text-align: center;width:5%"><%=datas[i].probability1%></td>
      <td style="text-align: center;width:5%"><%=datas[i].probability%></td>
      <td style="text-align: center;width:20%"><%=datas[i].happy_times%></td>
      <td style="text-align: center;width:40%">
        <a href="/box_management/doors?boxid=<%=datas[i].box_id%>&&index=0"><input style="width:55px;height:30px;background-color:#DBDBDB;border:1px solid #DBDBDB;border-radius:3px;margin-right:15px;" type="button" value="状态"></a>
        <a href="/box_management/active?num=1&boxid=<%=datas[i].box_id%>"><input style="width:75px;height:30px;background-color:#DBDBDB;border:1px solid #DBDBDB;border-radius:3px;margin-right:15px;" type="button" value="活动管理"></a>
        <a href="/box_management/binding_list?boxid=<%=datas[i].box_id%>"><input style="width:60px;height:30px;background-color:#DBDBDB;border:1px solid #DBDBDB;border-radius:3px;margin-right:15px;" type="button" value="商品"></a>
<!--<a href="#" data-toggle="modal" data-target="#myModal">-->
        <a href="/box_management/boxM_alarms?boxid=<%=datas[i].box_id%>"><input style="width:65px;height:30px;background-color:#DBDBDB;border:1px solid #DBDBDB;border-radius:3px;margin-right:15px;" type="button" value="中奖率"></a>
        <!--<a href="#" onclick="openModal('<%=datas[i].box_id%>')"><input style="width:65px;height:30px;background-color:#DBDBDB;border:1px solid #DBDBDB;border-radius:3px;margin-right:15px;" type="button" value="中奖率"></a>-->

        <a href="/box_management/edit?boxid=<%=datas[i].box_id%>"><input style="width:55px;height:30px;background-color:#DBDBDB;border:1px solid #DBDBDB;border-radius:3px;margin-right:15px;" type="button" value="编辑"></a>
        <a href="/box_management/rembox?boxid=<%=datas[i].box_id%>"><input style="width:55px;height:30px;background-color:#DBDBDB;border:1px solid #DBDBDB;border-radius:3px;" onclick="return confirm('确定删除该箱子?')" type="button" value="删除"></a>
      </td>
    </tr>
    <%}%>
    </table>
  <div class="span12">
    <div id="page2"></div>
  </div>



<!-- 模态框（Modal） -->
<!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close"
                data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h4 class="modal-title" id="myModalLabel">
          设置中奖率
        </h4>
      </div>
      <div class="modal-body">
        <div style="margin: 0 0 15px 20px;">机率为 0 时不启用此设置，中奖时段也无效</div>
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="probability" class="col-sm-1 control-label" style="width: 60px;">机率：</label>
            <div class="col-sm-11">
              <input type="number" class="form-control" id="probability"
                     placeholder="">
              <span>（摇多少次中一次）</span>
            </div>

          </div>

          <div class="form-group" style="margin-top: 10px;color: #006dcc;">
            <label for="times1" class="col-sm-1 control-label" style="width: 60px;">循环：</label>
            <div id="datetimepicker3" class="input-append">
              <input data-format="hh:mm:ss" type="text" id="times1"/>
              <span class="add-on">
              <i data-time-icon="icon-time" data-date-icon="icon-calendar">
              </i>
              </span>
            </div>

            <span>（每天执行一次）</span>
          </div>

          <div class="form-group" style="margin-top: 5px;color: #006dcc;">
            <label for="duration1" class="col-sm-1 control-label" style="width: 60px;">持续：</label>
            <div class="col-sm-11">
              <input type="number" class="form-control" id="duration1"
                     placeholder="">
              <button type="button" class="btn btn-default" id="addLoop">添加
              </button>
              <span>分钟（持续时间）</span>
            </div>

          </div>

          <div class="form-group" style="margin-top: 15px;color: #499249;">
            <label for="times1" class="col-sm-1 control-label" style="width: 60px;">单次：</label>
            <div id="datetimepicker2" class="input-append date">
              <input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="times2">
              <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar">
                </i>
              </span>
            </div>

            <span>（指定时间执行一次）</span>
          </div>

          <div class="form-group" style="margin-top: 5px;color: #499249;">
            <label for="duration2" class="col-sm-1 control-label" style="width: 60px;">持续：</label>
            <div class="col-sm-11">
              <input type="number" class="form-control" id="duration2"
                     placeholder="">
              <button type="button" class="btn btn-default" id="addOnce">添加
              </button>
              <span>分钟（持续时间）</span>
            </div>

          </div>


          <div class="form-group" style="margin-top: 15px;" id="timesGroup">



          </div>
        </form>
      </div>
      <div class="modal-footer" style="padding-bottom: 15px;">
        &lt;!&ndash;<button type="button" class="btn btn-default" style="height: 30px;" data-dismiss="modal">关闭
        </button>
        <button type="button" class="btn btn-primary" style="margin-bottom: 15px !important;height: 30px;">
          提交更改
        </button>&ndash;&gt;
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
        </button>
        <button type="button" class="btn btn-primary" id="submit">
          提交更改
        </button>
      </div>
    </div>&lt;!&ndash; /.modal-content &ndash;&gt;
  </div>&lt;!&ndash; /.modal &ndash;&gt;
</div>-->

</body>

<link rel="stylesheet" type="text/css" href="/js/datetimepicker/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="/js/datetimepicker/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/js/datetimepicker/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">

  var looptimes = new Array();//循环时间
  var oncetimes = new Array();//执行一次的时间
  var count=1;
  var loopcount=0;//记录数组下标
  var oncecount=0;
  var boxid='';

  /**
   * 打开模态框
   * @param boxid
   */
  function openModal(box_id){
    boxid = box_id;
    $('#myModal').modal('toggle');

  }

  $(function() {

    $('#datetimepicker3').datetimepicker({
      maskInput: true,
      pickDate: false
    });
    var picker = $('#datetimepicker3').data('datetimepicker');

    $('#datetimepicker2').datetimepicker({
      maskInput: true,
      format: 'yyyy/MM/dd hh:mm:ss',
      language: 'zh-CN'
    });


    var picker1 = $('#datetimepicker3').data('datetimepicker');
    $('#addLoop').click(function(){
        var date = picker.getLocalDate();
      var times1 = $('#times1').val();
      var duration1 = $('#duration1').val();//持续时间
      looptimes.push(times1+'~'+duration1);
      console.log(date.toString()+'~~~~~~~~'+times1);
      $('#timesGroup').append('<button type="button" class="btn btn-default" id="alarms'+count+'"' +
              ' style="margin: 8px 3px 0 0;" onclick="delalarm('+count+','+loopcount+')">'+times1+' ['+duration1+'分钟]</button>');
      count++;
      loopcount++;
    });
    $('#addOnce').click(function(){
      var date = picker1.getLocalDate();
      var times2 = $('#times2').val();
      console.log(date.toString());
      var duration2 = $('#duration2').val();//持续时间
      oncetimes.push(times2+'~'+duration2);

      $('#timesGroup').append('<button type="button" class="btn btn-default"  id="alarms'+count+'"' +
              ' style="margin: 8px 3px 0 0;" onclick="delalarm1('+count+','+oncecount+')">'+times2+' ['+duration2+'分钟]</button>');
      count++;
      oncecount++;
    });

    $('#submit').click(function(){
      var newTimeArr =  looptimes.concat(oncetimes).join(',');
      var probability = $('#probability').val();
      $.post('/box_management/setHappyTime',{boxid:boxid, newTimeArr:newTimeArr,probability:probability},function(result){
        alert(result.msg);
      });
    });
  });
  function delalarm(count,loopcount){
    $('#alarms'+count).remove();
    looptimes.splice(loopcount,1);
  }
  function delalarm1(count,oncecount){
    $('#alarms'+count).remove();
    oncetimes.splice(oncecount,1)
  }

</script>
</html>